<template>
  <div>
    <h1>摇摆之夜, 正式开启</h1>
    <button @click="changeColor">苏喂苏喂</button>
    <div class="box" :style="{ backgroundColor: col }"></div>
  </div>
</template>

<script>
import { animate } from 'popmotion'
export default {
  data () {
    return {
      col: '#8df'
    }
  },
  methods: {
    changeColor () {
      animate({
        from: '#42A5F4',
        to: '#ff0066',
        duration: 150,
        repeat: 1110,
        onUpdate: val => { this.col = val }
      })
    }
  }
}
</script>

<style>
.box {
  width: 360px;
  height: 190px;
}
</style>
